import React, { PropTypes } from 'react';
import {Button,Card,Tabs,Row, Col,Calendar,Icon} from 'antd';
import {findDOMNode} from 'react-dom';
import TweenOne from 'rc-tween-one';
import QueueAnim from 'rc-queue-anim';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';

var ReactHighcharts = require('react-highcharts');

const TabPane = Tabs.TabPane;

import Mask from '../components/Mask';
import List from '../components/List';

import './less/index.less';

var props1=[{
    date:'10-01',
    motice:'[EOM][审批]张晓(gsa23)交了请假审批表[休年假]ddddddddddddddddddddddddddddddddddd'
},{
    date:'09-01',
    motice:'[EOM][审批]张晓(gsa23)交了请假审批表[休年假]'
},{
    date:'10-11',
    motice:'[EOM][审批]张晓(gsa23)交了请假审批表[休年假]'
},{
    date:'11-01',
    motice:'[EOM][审批]张晓(gsa23)交了请假审批表[休年假]'
},{
    date:'05-01',
    motice:'[EOM][审批]张晓(gsa23)交了请假审批表[休年假]'
}];

var props2=[{
    motice:'[EOM][审批]张晓(gsa23)交了请假审批表[休年假]'
},{
    motice:'[EOM][审批]张晓(gsa23)交了请假审批表[休年假]'
},{
    motice:'[EOM][审批]张晓(gsa23)交了请假审批表[休年假]'
},{
    motice:'[EOM][审批]张晓(gsa23)交了请假审批表[休年假]'
},{
    motice:'[EOM][审批]张晓(gsa23)交了请假审批表[休年假]'
}];

var config = {
  colors:[
        '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
        '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
        '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
  ],
  title: {
    text: '数据测试',
    style:{
        fontWeight: 'normal',
        color: '#008acd'
    }
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  series: [{
    name:'上网流量',
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 295.6, 454.4]
  }],
  credits:{
    enabled:false
  }
};
var config2 = {
  colors:[
        '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
        '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
        '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
  ],
  chart: {
    type: 'column'
  },
  title: {
    text: '数据测试',
    style:{
        fontWeight: 'normal',
        color: '#008acd'
    }
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  series: [{
    name:'上网流量',
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 295.6, 454.4]
  }],
  credits:{
    enabled:false
  }
};

import {getList} from '../services/login';

export default class Home extends React.Component {
  constructor(props){
     super(props);
     this.state={
        overCircle:false
     }
  }
  componentDidMount() {
      if(findDOMNode(this.refs.blankContent).offsetWidth > 345){
          this.setState({
              overCircle:true
          })
      }
      var options = { resultType: "json", xml: "<?xml version=\"1.0\" encoding=\"utf-8\" ?><ajaxStorage><action><![CDATA[getPages]]></action><pages><rowIndex>0</rowIndex><pageSize>10</pageSize><rowCount>278</rowCount><pageCount>0</pageCount><currentPage>1</currentPage><firstPage>1</firstPage><previousPage>1</previousPage><nextPage>2</nextPage><lastPage>28</lastPage><whereClause><![CDATA[ DocStatus = ##1##]]></whereClause><orderBy><![CDATA[ istop desc,SetTopDate desc, createdate desc ]]></orderBy></pages></ajaxStorage>" }
      getList({
          method: 'POST',
          body:options,
      }).then(data => {
        console.log(data);
        //this.context.router.push('/app/index');
      });
  }

  callback(key){

  }

  onPanelChange(value, mode){

  }

  showDetail(obj){

  }
  render() {
    return (
      <div className="templates-wrapper">
        <TweenOne
          style={{opacity:1}}
          animation={{ x: 180,opacity:0, type: 'from', ease: 'easeOutQuad' }}
        >
            <Row>
                <TweenOne
                  style={{opacity:1}}
                  animation={{ x: 280,opacity:0,delay: 1000, type: 'from', ease: 'easeOutQuad' }}
                >
                <Col span={6}>
                  <Card >
                    <Tabs type='cart' defaultActiveKey="1" onChange={this.callback}>
                      <TabPane tab="EOM代办" key="1">
                          <div className="miniPanle">
                            <div className="tip"><span>2</span>条EOM审批待办</div>
                            <List dataSource={props1} clickCallbak={this.showDetail} timeColor="#4BB0B8"/>
                          </div>
                      </TabPane>
                      <TabPane tab="EOM备份" key="2">
                        <div className="miniPanle">
                          <div className="tip"><span>2</span>条EOM审批待办</div>
                          <List dataSource={props1} clickCallbak={this.showDetail} timeColor="#4BB0B8"/>
                        </div>
                      </TabPane>
                      <TabPane tab="预警督办" key="3">
                        <div className="miniPanle">
                          <div className="tip"><span>2</span>条EOM审批待办</div>
                          <List dataSource={props1} clickCallbak={this.showDetail} timeColor="#4BB0B8"/>
                        </div>
                      </TabPane>
                    </Tabs>
                  </Card>
                  <Card style={{marginTop:15}}>
                    <Tabs type='cart' defaultActiveKey="n1" onChange={this.callback}>
                      <TabPane tab="新闻" key="n1">
                        <div className="miniPanle">
                            <List dataSource={props1} clickCallbak={this.showDetail} timeColor="#1EB6F8"/>
                        </div>
                      </TabPane>
                      <TabPane tab="通知" key="n2">Conten of Tab Pane 2</TabPane>
                      <TabPane tab="公告" key="n3">Conten of Tab Pane 2</TabPane>
                      <TabPane tab="员工" key="n4">Conten of Tab Pane 2</TabPane>
                      <TabPane tab="知识" key="n5">Conten of Tab Pane 2</TabPane>
                    </Tabs>
                  </Card>
                  <Card title='信息' extra={<a href="#" style={{color:'#FF8700'}}>更多<span style={{fontSize:16,marginLeft:3}}>+</span></a>} style={{marginTop:15}}>
                      <div className="miniPanle">
                        <List dataSource={props1} clickCallbak={this.showDetail} timeColor="#FF8700"/>
                      </div>
                  </Card>
                </Col>
                </TweenOne>
              <Col span={12} style={{paddingLeft:15}}>
                <Row>
                  <Col span={12} style={{paddingRight:7.5}}>
                    <Card title={<span><img style={{width:15,height:14,marginBottom:-2}} src={require('../assets/crm.png')}/><span style={{color:'#666',fontSize:16,marginLeft:6}}>CRM</span></span>} extra={<a href="#" style={{color:'#FF8700'}}>更多<span style={{fontSize:16,marginLeft:3}}>+</span></a>}>
                        <div className="blankContent centerPanle" ref="blankContent">
                            <Row>
                                <Col span={this.state.overCircle?8:12}>
                                    <img src={require("../assets/crm1.png")}/>
                                    <div className="crmDetail">
                                        <div className="name">总会员</div>
                                        <div className="number number1">5</div>
                                    </div>
                                </Col>
                                <Col span={this.state.overCircle?8:12}>
                                  <img src={require("../assets/crm2.png")}/>
                                  <div className="crmDetail">
                                      <div className="name">总商家</div>
                                      <div className="number number2">5</div>
                                  </div>
                                </Col>
                                <Col span={this.state.overCircle?8:12} style={{marginTop:this.state.overCircle?0:20}}>
                                  <img src={require("../assets/crm3.png")}/>
                                  <div className="crmDetail">
                                      <div className="name">商品总类</div>
                                      <div className="number number3">5</div>
                                  </div>
                                </Col>
                                <Col span={this.state.overCircle?8:12} style={{marginTop:20}}>
                                  <img src={require("../assets/crm4.png")}/>
                                  <div className="crmDetail">
                                      <div className="name">已实现数额</div>
                                      <div className="number number4">5</div>
                                  </div>
                                </Col>
                                <Col span={this.state.overCircle?8:12} style={{marginTop:20}}>
                                  <img src={require("../assets/crm5.png")}/>
                                  <div className="crmDetail">
                                      <div className="name">未实现总额</div>
                                      <div className="number number5">5</div>
                                  </div>
                                </Col>
                                <Col span={this.state.overCircle?8:12} style={{marginTop:20}}>
                                  <img src={require("../assets/crm6.png")}/>
                                  <div className="crmDetail">
                                      <div className="name">总交易额</div>
                                      <div className="number number6">5</div>
                                  </div>
                                </Col>
                            </Row>
                        </div>
                    </Card>
                  </Col>
                  <Col span={12} style={{paddingLeft:7.5}}>
                    <Card title={<span><img style={{width:15,height:14,marginBottom:-2}} src={require('../assets/plan.png')}/><span style={{color:'#666',fontSize:16,marginLeft:6}}>个人计划</span></span>} extra={<a href="#" style={{color:'#FF8700'}}>更多<span style={{fontSize:16,marginLeft:3}}>+</span></a>} >
                        <div className="centerPanle">
                          <List dataSource={props1} clickCallbak={this.showDetail} timeColor="#FF8700"/>
                        </div>
                    </Card>
                  </Col>
                </Row>
                <Row style={{marginTop:15}}>
                  <Col span={24}>
                    <div className='cardPanel'>
                      <Tabs defaultActiveKey="1">
                          <TabPane tab={<span><Icon type="line-chart" />折线图</span>} key="1">
                            <ReactHighcharts config={config}></ReactHighcharts>
                          </TabPane>
                          <TabPane tab={<span><Icon type="bar-chart" />柱状图</span>} key="2">
                            <ReactHighcharts config={config2}></ReactHighcharts>
                          </TabPane>
                      </Tabs>
                    </div>
                  </Col>
                </Row>
              </Col>
              <TweenOne
                style={{opacity:1}}
                animation={{ x: 280,opacity:0, delay: 1500, type: 'from', ease: 'easeOutQuad' }}
              >
              <Col span={6} style={{paddingLeft:15}}>
                <div className='cardPanel' style={{height:505}}>
                  <Calendar fullscreen={false} onPanelChange={this.onPanelChange} />
                  <ul>
                      <li><span>今天14:00</span><span>有待办事项有待办事项有待办</span></li>
                      <li><span>今天14:00</span><span>有待办事项有待办事项有待办</span></li>
                  </ul>
                  <div className="add">
                      <Button type="primary" shape="circle" icon="plus" />
                  </div>
                </div>
                <Card className="fileCard" style={{marginTop:15}} title={<span><img src={require('../assets/info.png')}/><span style={{color:'#666',fontSize:12,marginLeft:6}}>信息</span></span>} extra={<a href="#" style={{color:'#FF8700'}}>更多<span style={{fontSize:16,marginLeft:3}}>+</span></a>}>
                    <div className="miniPanle">
                        <List dataSource={props2} clickCallbak={this.showDetail}/>
                    </div>
                </Card>
              </Col>
              </TweenOne>
            </Row>
          </TweenOne>
          <TweenOne
            style={{opacity:1}}
            animation={{ y: 180,opacity:0, delay: 1500, type: 'from', ease: 'easeOutQuad' }}
          >
          <Row>
            <Col span={8} style={{paddingRight:10}} className="fileCard">
                <Card style={{marginTop:15}} title={<span><img style={{width:14,height:19,marginBottom:-4}} src={require('../assets/footer1.png')}/><span style={{color:'#666',fontSize:12,marginLeft:6}}>常用章程</span></span>} extra={<a href="#" style={{color:'#FF8700'}}>更多<span style={{fontSize:16,marginLeft:3}}>+</span></a>}>
                  <List dataSource={props2} clickCallbak={this.showDetail}/>
                </Card>
            </Col>
            <Col span={8} style={{paddingRight:5,paddingLeft:5}} className="fileCard">
                <Card style={{marginTop:15}} title={<span><img style={{width:16,height:14,marginBottom:-2}} src={require('../assets/footer2.png')}/><span style={{color:'#666',fontSize:12,marginLeft:6}}>个人喜欢流程</span></span>} extra={<a href="#" style={{color:'#FF8700'}}>更多<span style={{fontSize:16,marginLeft:3}}>+</span></a>}>
                  <List dataSource={props2} clickCallbak={this.showDetail}/>
                </Card>
            </Col>
            <Col span={8} style={{paddingLeft:10}} className="fileCard">
                <Card style={{marginTop:15}} title={<span><img style={{width:25,height:13,marginBottom:-2}} src={require('../assets/footer3.png')}/><span style={{color:'#666',fontSize:12,marginLeft:6}}>最活跃</span></span>} extra={<a href="#" style={{color:'#FF8700'}}>更多<span style={{fontSize:16,marginLeft:3}}>+</span></a>}>
                  <List dataSource={props2} clickCallbak={this.showDetail}/>
                </Card>
            </Col>
          </Row>
        </TweenOne>
      </div>
    );
  }
}
